<template>
  <el-row>
    <el-col :span="12">
      <el-card style="height:620px">
        <div slot="header" class="clearfix">
          <span>订单总量</span>
          <i style="float: right; padding: 3px 0">2022-08 - 2023-01</i>
          <p class="unit">单位：笔</p>
        </div>
        <div class="order">
          <div class="order-data">
            <p>{{ orderLineChart.orderMaxNumber }}</p>
            <span>订单最高值</span>
          </div>
          <div class="order-data">
            <p>{{ orderLineChart.orderAverageNumber }}</p>
            <span>订单平均值</span>
          </div>
          <div class="order-data">
            <p>{{ orderLineChart.orderMinNumber }}</p>
            <span>订单最低值</span>
          </div>
        </div>
        <div ref="echartOrder" class="echartOrder" />
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card style="height:620px">
        <div slot="header" class="clearfix">
          <span>订单分布</span>
          <i style="float: right; padding: 3px 0">2022-08 - 2023-01</i>
          <p class="unit">单位：笔</p>
        </div>
        <div ref="echartDistribution" class="echartDistribution" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    orderLineChart: {
      type: Object,
      default: () => {}
    }
  },

  async mounted() {
    this.initEchartsOrder()
    this.initEchartsDistribution()
  },
  methods: {
    initEchartsOrder() {
      const myChart = echarts.init(this.$refs.echartOrder)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.orderLineChart.monthlyOrderList.map(item => item.dateTime)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Email',
            type: 'line',
            // stack: 'Total',
            symbol: 'circle',
            lineStyle: {
              color: '#e15536'
            },
            itemStyle: {
              color: '#e15536'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'white' // 0% 处的颜色
                }, {
                  offset: 1, color: 'pink' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: this.orderLineChart.monthlyOrderList.map(item => item.orderNumber)
          }

        ]
      }
      option && myChart.setOption(option)
    },
    initEchartsDistribution() {
      const myChart = echarts.init(this.$refs.echartDistribution)
      const option = {
        grid: {
          // left: '3%',
          // right: '4%',
          // bottom: '-30',
          top: '50',
          containLabel: true
        },
        xAxis: [{
          type: 'value'
          // boundaryGap: [0, 0.01]
        }],
        yAxis: [{
          type: 'category',
          data: ['北京', '天津', '上海', '重庆', '新疆', '西藏', '宁夏', '内蒙古',
            '广西', '黑龙江', '吉林', '辽宁', '河北', '山东', '江苏', '安徽',
            '浙江', '福建', '广东', '海南', '云南', '贵州', '四川', '湖南',
            '湖北', '河南', '山西', '陕西', '甘肃', '青海', '江西', '台湾', '香港', '澳门'],
          axisTick: {
            show: false,
            alignWithLabel: true
          },
          axisLine: {
            show: false // 不显示坐标轴线
          }
        }],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            data: Array.from({ length: 34 }, v => Math.floor(Math.random() * 2500)).sort((a, b) => a - b),
            color: '#e15536',
            barCategoryGap: '50%'
          }
        ]
      }
      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss">
.order{
  display: flex;
  justify-content: space-evenly;
  .order-data{
    text-align: center;
    p{
      font-size: 28px;
      color: #e15536;
      font-weight: 700;
      margin-bottom: 5px;
    }
    span{
      font-size: 12px;
      color: #818693;
    }
  }
}
.echartOrder {
  width: 100%;
  height: 400px;
}
.echartDistribution{
  height:550px;
}
.unit{
  font-size: 12px;
  color: #818693;
}
</style>
